@charset "utf-8";
//动画框架
//多种动画形态，不同形态可以组合

@import "../core/mixin.scss";

//变量
$setting: (
    // 是否开启厂商前缀
    is-vendor-prefix: true,
    // 厂商前缀
    vendor-prefix:    -webkit-
);

//mixin
//定义动画
@mixin animation($animation...) {
  @include _prefix(animation, $animation);
}
//指定需要引用的动画名称
@mixin animation-name($animation-name...) {
  @include _prefix(animation-name, $animation-name);
}
//动画运行时长
@mixin animation-duration($animation-duration...) {
  @include _prefix(animation-duration, $animation-duration);
}
//动画运行方式
@mixin animation-timing-function($animation-timing-function...) {
  @include _prefix(animation-timing-function, $animation-timing-function);
}
//动画延迟时间
@mixin animation-delay($animation-delay...) {
  @include _prefix(animation-delay, $animation-delay);
}
//动画运行次数
@mixin animation-iteration-count($animation-iteration-count...) {
  @include _prefix(animation-iteration-count, $animation-iteration-count);
}
//动画运行方向
@mixin animation-direction($animation-direction...) {
  @include _prefix(animation-direction, $animation-direction);
}
//动画运行状态
@mixin animation-play-state($animation-play-state...) {
  @include _prefix(animation-play-state, $animation-play-state);
}
//动画时间之外的状态
@mixin animation-fill-mode($animation-fill-mode...) {
  @include _prefix(animation-fill-mode, $animation-fill-mode);
}


//定义动画基本特性
.ani {
  //定义动画持续时间
  @include animation-duration(1s);
  //定义动画运行最终状态
  @include animation-fill-mode(both);

}
.ani.infinite {
  //定义动画无限循环
  @include animation-iteration-count(infinite);
}
